import {EChartsOption} from "echarts";

export const ECHARTS_BAR: EChartsOption = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
    grid: {
      top: '0',
      left: '3%',
      right: '4%',
      bottom: '15%',
      containLabel: true
    },
    legend: {
        data: [],
        bottom: '0'
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true },
        },
    },
    xAxis: [
        {
            type: 'category',
            axisTick: { show: false },
            data: [],
        },
    ],
    yAxis: [
        {
            type: 'value',
        },
    ],
    series: [],
};

export const ECHARTS_RADAR: EChartsOption = {
    legend: {
        data: ['Allocated Budget', 'Actual Spending'],
        bottom: '10'
    },
    radar: {
        center: ['50%', '50%'],
        indicator: [
            { name: 'Sales', max: 6500 },
            { name: 'Administration', max: 16000 },
            { name: 'Information Technology', max: 30000 },
            { name: 'Customer Support', max: 38000 },
            { name: 'Development', max: 52000 },
            { name: 'Marketing', max: 25000 },
        ],
    },
    series: [
        {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
                {
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: 'Allocated Budget',
                },
                {
                    value: [5000, 14000, 28000, 26000, 42000, 21000],
                    name: 'Actual Spending',
                },
            ],
        },
    ],
};